<template>
    <free-app bgType="image" :navbar="navbarOptions" :_pages="2">
        <!-- 页面内容 -->
        <wd-tabs custom-class="tabs" v-model="tab" auto-line-width>
            <block v-for="(item, index) in List" :key="index">
                <wd-tab :title='item'>
                    <template v-if="index === 0">
                        <view class=" flex flex-col gap-4 items-center mt-120rpx mx-295rpx">
                            <image src="../../static/images/invitation/letter.png" class="w-150rpx h-150rpx"></image>
                            <view class="font-400 lh-[140%] color-text-3">暂无记录</view>
                        </view>
                        <view
                            class="w-662rpx px-20rpx py-3 bg-primary-6 color-text-5 font-500 center mx-3 mt-1109rpx rounded-88rpx"
                            @click="handleSend">发货</view>
                        <wd-popup v-model="show" custom-style="border-radius:32rpx;" @close="handleClose">
                            <view class="w-556rpx h-256rpx p-5 bg-white">22ss</view>
                        </wd-popup>
                        <view class="h-88rpx"></view>
                    </template>


                    <template v-else="index === 1">
                        <view class="flex flex-col gap-4 items-center mt-120rpx mx-295rpx">
                            <image src="../../static/images/invitation/letter.png" class="w-150rpx h-150rpx"></image>
                            <view class="font-400 lh-[140%] color-text-3">暂无记录</view>
                        </view>

                    </template>
                </wd-tab>
            </block>
        </wd-tabs>

    </free-app>
</template>

<script setup>
import { ref } from 'vue'
//开启share选项
defineOptions({
    options: {
        styleIsolation: 'shared'
    }
})
const navbarOptions = {
    title: "滞销商品",
    placeholder: true,
    _pages: 2  // 注意这里的语法
};
const tab = ref("已发货");

const List = ref([
    "不良品",
    "已发货"
])

//发货

const show = ref('flase')
const handleClose = () => {
    show.value = !show.value

}
</script>

<style scoped lang="scss">
::v-deep(.wd-tabs) {

    .wd-tabs.tabs {
        background-color: transparent !important; //清除默认背景颜色
    }

    .wd-tabs__nav {
        background-color: transparent !important; //清除默认背景颜色
    }

    .wd-tabs__nav-container {
        width: 686rpx !important;
        height: 80rpx !important;
        padding: 0 32rpx !important;
        gap: 48rpx !important;
        display: flex;
        background-color: transparent !important;

    }

    .wd-tabs__nav-item-text {
        color: var(--primary-primary-6, #0F57C2);
        text-align: center !important;
        font-size: 28rpx !important;
        font-weight: 500 !important;

    }

    .wd-tabs__nav-item {
        width: 84rpx !important;
        height: 39rpx !important;
        padding: 20rpx 0 !important;
        flex: none !important;
        min-width: auto !important;
    }

    .wd-tabs__line {
        left: 32rpx !important;
    }

}
</style>